<template>
	<view class="l_pages">
		<jnavbar title="我的发票"></jnavbar>
		<view class="page_container tab_page_container">
			<u-tabs ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"
		 active-color="#FC5E25"></u-tabs>
	<!-- 	<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"
		 active-color="#FC5E25"></u-tabs-swiper> -->
		<view class="">
			<view v-if="list[current].lister.length<=0" style="height: calc(100vh - 80rpx);">
				<u-empty text="数据为空" mode="list"></u-empty>
			</view>
			<view v-else v-for="(items,index) in list[current].lister" :key="index" @click="">
				<view class="swiper-div">
					<view style="border-radius: 10rpx;overflow: hidden;">
						<view class="div-box">
							<view class="box_item">
								<view class="box-title">
									<view v-if="items.invoice_type == 1">个人发票</view>
									<view v-else-if="items.invoice_type == 2">企业发票</view>
									<view class="box-time">{{items.create_time}}</view>
								</view>
								<view class="box-start">
									<span v-if="items.status == 1">未审核</span>
									<span v-if="items.status == 2">已开票</span>
									<span v-if="items.status == 3">驳回</span>
								</view>
								
							</view>
							<view class="box_item mg15">
								<view class="box-content">
									{{items.duty_paragraph}}
								</view>
								<view>
									<span>￥</span>
									<span class="box-num">{{items.money}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
<!-- 		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: calc(100vh - 80rpx);">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index" style="height: calc(100vh - 80rpx);">
				<scroll-view scroll-y class="page_swiper" style="width: 100%;height: calc(100% - 80rpx);" @scrolltolower="scrolltolower(item)">
					<view v-if="item.lister.length<=0" style="height: calc(100vh - 80rpx);">
						<u-empty text="数据为空" mode="list"></u-empty>
					</view>
					<view v-else v-for="(items,index) in item.lister" :key="index" @click="">
						<view class="swiper-div">
							<view style="border-radius: 10rpx;overflow: hidden;">
								<view class="div-box">
									<view class="box_item">
										<view class="box-title">
											<view v-if="items.invoice_type == 1">个人发票</view>
											<view v-else-if="items.invoice_type == 2">企业发票</view>
											<view class="box-time">{{items.create_time}}</view>
										</view>
										<view class="box-start">
											<span v-if="items.status == 1">已开票</span>
											<span v-else>未开票</span>
										</view>
									</view>
									<view class="box_item mg15">
										<view class="box-content">
											{{items.duty_paragraph}}
										</view>
										<view>
											<span>￥</span>
											<span class="box-num">{{items.money}}</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="margin-bottom: 20rpx;">
						<u-loadmore v-if="item.lister.length > 9" :status="item.status" :load-text="loadText" />
					</view>
				</scroll-view>
			</swiper-item>
		</swiper> -->
		</view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {getisInvoice} from '@/common/invoice.js'
	import http from '@/common/http.js';
	export default {
		data() {
			return {
				list: [{
					name: '全部发票',
					lister: [],
					page: 1,
					hasShow: 'list',
					invoice_type: 0,
					status: 'loading',
				}, {
					name: '个人发票',
					lister: [],
					page: 1,
					hasShow: 'list',
					invoice_type: 1,
					status: 'loading',
				}, {
					name: '企业发票',
					lister: [],
					page: 1,
					hasShow: 'list',
					invoice_type: 2,
					status: 'loading',
				}],
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0,
				size: 10,
			}
		},
		async onLoad(e) {
			await this.$getWx
			this.current = e.invoice_type||0
			this.swiperCurrent = e.invoice_type||0
			this.getInvoiceList();
		},
		onPullDownRefresh() {
			this.list[this.current].page = 1;
			this.list[this.current].lister = [];
			this.getInvoiceList();
		},
		onreachBottom(){
			this.getInvoiceList();
		},
		methods: {
			getInvoiceList() {
				let data = {
					invoice_type: this.current,
					page: this.list[this.current].page,
					size: 10
				};
				if(data.invoice_type == 0){
					delete data.invoice_type
				}
				http('/Invoice/list', data, 'GET').then(res => {
					uni.stopPullDownRefresh();
					let dataList = res.data.msg.data
					if (dataList.length <= 0 && dataList.page === 1) {
						this.list[this.current].hasShow = 'none'
					} else {
						this.list[this.current].lister = this.list[this.current].lister.concat(dataList)
						this.list[this.current].hasShow = 'list';
						this.list[this.current].page++;
						dataList.length != 10 ? this.list[this.current].status = 'nomore' : this.list[this.current].status = 'loadmore'
					}
				})
			},
			scrolltolower(item) {
				debugger
				item.status = 'loading'
				this.getInvoiceList()
			},
			// tabs通知swiper切换
			tabsChange(index) {
				debugger
				this.current = index;
				if (!this.list[index].lister || this.list[index].lister.length === 0) {
					this.getInvoiceList();
				}
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				if (current != this.current) {
					this.$refs.uTabs.setFinishCurrent(current);
					this.swiperCurrent = current;
					this.current = current;
					this.getInvoiceList();
				}
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.list[this.current].page += 1;
				this.getInvoiceList();
			},
			logincallback() {
				if (e.islogin) {
					_this.getInvoiceList();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-div {
		width: 100%;
		height: 100%;
		padding: 10rpx 20rpx 0rpx 20rpx;
		margin: 20rpx 0rpx;
		box-shadow: 5rpx 0 5rpx #e8e8e8;

		.div-box {
			width: 100%;
			padding: 25rpx 35rpx;
			box-sizing: border-box;
			background: #fff;

			.box_item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.box-title {
					color: #FC5E25;
					display: flex;
					align-items: center;
					font-size: 24rpx;

					.box-time {
						color: #181818;
						font-size: 20rpx;
						margin-left: 20rpx;
					}
				}

				.box-content {
					font-size: 32rpx;
					font-weight: bold;
				}

				.box-num {
					font-size: 38rpx;
				}

				.box-start {
					font-size: 24rpx;
				}
			}

		}
	}

	.mg15 {
		margin-top: 30rpx;
	}
</style>
